<template>
	<el-drawer title="企业基本信息" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
	<el-tabs :tab-position="tabPosition" style="height: 200px; ">
		<el-tab-pane label="基本信息" id="tab1">
			<el-container v-loading="loading"> 
			<el-main> 
				<el-card shadow="never">
          <template v-slot:header>
            {{form.name}} 
            <div style="float: right;display: inline-flex">
              <!--
              <sc-icon style="cursor: pointer;width: 18px; margin-right: 10px;" @click="reLoadBpm" title="刷新"><el-icon-refresh-right/></sc-icon>
              <sc-icon style="cursor: pointer;width: 18px;" @click="getMoreBpm" title="全部"><el-icon-more-filled/></sc-icon>
            -->
            </div> 

          </template> 
          <el-row :gutter="24" >
            <el-col :span="16">  
              <div class="el-card is-hover-shadow item-background" data-v-d2c729f0="">  
                <el-row :lg="20" > 
                  <el-col :lg="8"> 
                    <!-- <el-image  style="width: 100px; height: 100px" :src="logoUrl" :fit="fit"></el-image>     -->
                    <el-image  style="width: 100px; height: 100px" :src="logo_url" :fit="fit"></el-image>  
                  </el-col> 
                  <el-col :lg="16">
                    <el-row :gutter="24">
                      <el-col :lg="24">
                        
                        <el-form-item label="成立时间：" prop="regist_time">{{form.regist_time}}</el-form-item>
                      </el-col>
                      <el-col :lg="24">
                        <el-form-item label="注册资金：" prop="regist_capi">{{form.regist_capi}}</el-form-item>
                      </el-col>
                      
                      <el-col :lg="24">
                        <el-form-item label="注册地址：" prop="geographic_info">{{form.geographic_info}}</el-form-item>
                      </el-col>
                    </el-row>
                  
                  </el-col>
                </el-row>
              </div>    
            </el-col> 
            <el-col :span="8"> 
                <div class="el-card is-hover-shadow item-background" data-v-d2c729f0="">  
                  <ul data-v-54a36368="" class="list1 clearfix"> 
                    <li data-v-54a36368="">
                      <i data-v-54a36368="" class="el-tooltip item" aria-describedby="el-tooltip-1401" tabindex="0">综合评分：<em>{{form.total_score}}</em> 分</i>
                    </li>
                    <li data-v-54a36368="">
                      <i data-v-54a36368="" class="el-tooltip item" aria-describedby="el-tooltip-1401" >科技创新指数：</i>
                      <p data-v-54a36368="" title="48分" class="score-star clearfix"><el-rate v-model="star1"></el-rate></p>
                    </li>
                    <li data-v-54a36368="">
                      <i data-v-54a36368="" class="el-tooltip item" aria-describedby="el-tooltip-8121" >企业稳定指数：</i>
                      <p data-v-54a36368="" title="90分" class="score-star clearfix"><el-rate v-model="star2"></el-rate></p></li>
                    <li data-v-54a36368="">
                      <i data-v-54a36368="" class="el-tooltip item" aria-describedby="el-tooltip-8121" >市场情绪指数：</i>
                      <p data-v-54a36368="" title="93分" class="score-star clearfix"><el-rate v-model="star3"></el-rate></p></li>
                    <li data-v-54a36368="">
                      <i data-v-54a36368="" class="el-tooltip item" aria-describedby="el-tooltip-6956" >投资风险指数：</i>
                      <p data-v-54a36368="" title="3分" class="score-star clearfix"><el-rate v-model="star4"></el-rate></p>
                      <i data-v-54a36368="" class="conclusion2">低</i></li></ul>
                </div>  
            </el-col>
          </el-row> 
    
					<el-form style="margin-top: 10px;">  
       
           <el-card class="box-card" >
            <div slot="header" class="clearfix"> 
              <el-button style="float: right; padding: 3px 0" type="text"> </el-button>
            </div> 
            <el-row :gutter="2" style="height: 40px;"> 
              <el-col :lg="8">
                <el-form-item label="产业分类：" prop="handedUser">{{form.industry_classification}}
                </el-form-item>
              </el-col> 
              <el-col :lg="8">
                <el-form-item label="行业分类：" prop="beginTime">{{form.industry_class}}
                </el-form-item>
              </el-col>
              <el-col :lg="8">
                <el-form-item label="企业资质：" prop="endTime">{{form.industry_classification}}
                </el-form-item>
              </el-col>
            </el-row> 
            <el-row :gutter="2" style="height: 40px;"> 
              <el-col :lg="8">
                <el-form-item label="人员规模：" prop="levelId">{{form.person_num}}</el-form-item>
              </el-col>
              <el-col :lg="8">
                <el-form-item label="官网地址：" prop="leadId">{{form.website}}
                </el-form-item>
              </el-col>
              <el-col :lg="8">  
                <el-form-item label="CRM状态：" prop="crm_status"> 
                  <el-tag type="warning" effect="dark" v-if="form.crm_status=='1'">目标</el-tag>
                  <el-tag type="primary" effect="dark" v-else-if="form.crm_status=='2'">接触</el-tag>
                  <el-tag type="success" effect="dark" v-else-if="form.crm_status=='3'">签约</el-tag>
                  <el-tag type="danger"  effect="dark" v-else-if="form.crm_status=='4'">淘汰</el-tag>  
                </el-form-item>
              </el-col>
            </el-row> 
            <el-row :gutter="20" >
              
              <el-col :lg="24">
                <el-form-item label="经营范围：" prop="handedUser">{{form.scope}}
                </el-form-item>
              </el-col> 
                
            </el-row> 
          </el-card>
					
				</el-form>
				</el-card>
				
				
				<el-footer style="text-align: center;">
					<el-button @click="visible=false">关闭</el-button>
				</el-footer>
			</el-main>
		</el-container>
		</el-tab-pane>
		<el-tab-pane label="技术统计">
			<el-main>
			  
  		</el-main>
	</el-tab-pane> 
	</el-tabs>
		
		
	</el-drawer>
</template>

<script>
import * as echarts from 'echarts'
import AttachMenu from '@/views/module/attachMenu'

export default {
	emits: ['success', 'closed'],
	components: {
		AttachMenu
	},
	data() {
		return {
			loading: false,
			form: {
				eId:'',
				name: '',
				regist_time: '',
				regist_capi: '',
				geographic_info:"",
				industry_classification:"",
				industry_class:'',
				person_num:'',
				website: '',
				equalification:'',
				remark: '',
				scope:'',
        introduction:'',
        logoUrl:"",
        total_score:'',
        crm_status:'',
				sci_tec:'', //科创指数
				stability:'', //稳定指数
				mark_sentiment:'',//市场情绪
				invest_risk:"" //投资风险
			},
			visible: false,
			isSaveing: false,
      star1: 4, 
      star2: 4, 
      star3: 3, 
      star4: 1,  
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      logoUrl:"",
      logo_url:""
		}
	},
	mounted() { 
    
    this.scope='';

		setTimeout(()=>{ 
      /*
			this.loadPieChart(this.$refs.growthContributionChart, '六大产业对园区收入增长贡献率');
			this.loadPieChart(this.$refs.practitionerCountChart, '园区从业人员水数量');
			this.loadPieChart(this.$refs.sixTotalIncomeChart, '六大产业总收入');
			this.loadPieChart(this.$refs.sixRealizeProfitsChart, '六大产业实现利润');
			this.loadPieChart(this.$refs.sixExportQuotaChart, '六大产业出口额');
			this.loadNewEnterpriseStatisticsChart();
			this.loadIndustryCarrierStatisticsChart();
			this.loadTotalRankingChart();
			this.loadSixIncomeComparisonChart();       
       */
		},2000)
    
	},
	methods: {
		//显示
		open(){
			this.visible = true;
			return this;
		},
		setData(data){
			this.form.eId = data.eid
			this.form.name = data.name
			this.form.regist_time = data.regist_time
			this.form.regist_capi = data.regist_capi
			this.form.geographic_info = data.geographic_info
			this.form.website = data.website
			this.form.industry_classification = data.industry_classification
			this.form.industry_class = data.industry_class
			this.form.person_num = data.person_num
			this.form.equalification = data.equalification
			this.form.scope = data.scope
      this.form.logo_url = ""
      this.logoUrl == data.logoUrl
      this.form.total_score=data.total_score
      this.form.crm_status = data.crm_status
      this.form.sci_tec=data.sci_tec, //科创指数
      this.form.stability=data.stability //稳定指数
      this.form.mark_sentiment=data.mark_sentiment//市场情绪
      this.form.invest_risk=data.invest_risk //投资风险

      this.star1 = this.form.sci_tec/20
      this.star2 = this.form.stability/20
      this.star3 = this.form.mark_sentiment/20
      this.star4 = this.form.invest_risk/20
      //this.getCompanyLogo() 
      setTimeout(()=>{
        this.getCompanyInfo(data.name);
        
      },2000)
		},
    async getCompanyLogo(){
			//let res = await this.$API.enterprise.company.getCompanyLogo.get({companyName:this.form.name}); 
			let res = await this.$API.enterprise.company.getCompanyLogo.get({companyName:"浙江大华技术股份有限公司"}); 
			if(res.status==200){
				this.logoUrl = res.data 
			}
		},
    async getCompanyInfo(name){ //公司简介
      let res = await this.$API.enterprise.company.getCompanyInfo.get({companyName:""+name+""}); 
      //let res = await this.$API.enterprise.company.getCompanyInfo.get({companyName:"浙江大华技术股份有限公司"}); 
      if(res.status==200){
        if(res.data!=null){
          var company = res.data.result[0];
          this.form.scope = company.scope;
        
          if(company.logo_url!=""){ 
            this.logo_url=company.logo_url; 
          }
        }
      }
    },
		async getCompanyById(data)
		{
			let res = await this.$API.enterprise.company.getCompanyById.get({eId:data});
			{
				if(res.code==200)
				{
					this.form.eId = res.data.eId
					this.form.title = res.data.title
					this.form.typeName = res.data.typeName
					this.form.levelName = res.data.levelName
					this.form.leadUserName = res.data.leadUserName
					this.form.handedUserName = res.data.handedUserName
					this.form.beginTime = res.data.beginTime
					this.form.endTime = res.data.endTime
					this.form.joinUserName = res.data.joinUserName
					this.form.attachId = res.data.attachId
					this.form.remark = res.data.remark
				}else
				{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			}
		},
    // 丰台园1-6月六大产业总收入构成对比图
    loadSixIncomeComparisonChart() {
      let myChart = echarts.init(this.$refs.sixIncomeComparisonChart);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '丰台园2023年1-6月六大产业总收入构成对比图',
          textStyle: {
            fontSize: 14
          },
          left: 'center'
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: function (value) {
              return value + '%';
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['轨道交通', '航空航天', '电子信息产业', '生物医药', '先进制造业', '新材料产业', '六大产业合计']
        },

        series: [
          {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside',//数据在中间显示
                  formatter: '{c}%'//百分比显示
                }
              }
            },
            data: [10, 8, 9, 2, 55, 66, 11]
          },
          {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside',//数据在中间显示
                  formatter: '{c}%'//百分比显示
                }
              }
            }, data: [20, 8, 9, 14, 3, 2, 11]
          },
          {
            name: 'Affiliate Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside',//数据在中间显示
                  formatter: '{c}%'//百分比显示
                }
              }
            },
            data: [10, 8, 9, 40, 3, 2, 11]
          },
          {
            name: 'Video Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside',//数据在中间显示
                  formatter: '{c}%'//百分比显示
                }
              }
            },
            data: [60, 76, 73, 44, 39, 30, 67]
          }
        ]
      };
      myChart.setOption(option);
      this.myChart = myChart;
      window.addEventListener('resize', () => myChart.resize());
    },
    // 加载产业收入总量排名
    loadTotalRankingChart() {
      let myChart = echarts.init(this.$refs.totalRankingChart);
      let option = {
        color: ['#ef0404'],
        xAxis: {
          type: 'category',
          data: ['轨道交通', '航空康天', '电子信息', '生物医药', '先进制造']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70],
            type: 'bar'
          }
        ]
      };
      myChart.setOption(option);
      this.myChart = myChart;
      window.addEventListener('resize', () => myChart.resize());
    },
    // 园区产业载体统计数据
    loadIndustryCarrierStatisticsChart() {
      let myChart = echarts.init(this.$refs.industryCarrierStatisticsChart);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            formatter: function (value) {
              return value + '万m²';
            },
          },
        },
        xAxis: {
          type: 'category',
          data: [
            '轨道交通',
            '航空航天',
            '电子信息产业',
            '生物医药',
            '先进制造业',
            '新材料产业',
            '六大产业合计'
          ]
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              formatter: function (param) {
                return param.value + '万m²';
              },
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              borderColor: '#fff',
              normal: {
                color: '#f30606'
              }
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              formatter: function (param) {
                return param.value + '万m²';
              },
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              borderColor: '#fff',
              normal: {
                color: '#0888e3'
              }
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      };
      myChart.setOption(option);
      this.myChart = myChart;
      window.addEventListener('resize', () => myChart.resize());
    },
    // 园区新增企业统计数据
    loadNewEnterpriseStatisticsChart() {
      let myChart = echarts.init(this.$refs.newEnterpriseStatisticsChart);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            formatter: function (value) {
              return value + '家';
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Affiliate Ad',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ad',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: 'Search Engine',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      myChart.setOption(option);
      this.myChart = myChart;
      window.addEventListener('resize', () => myChart.resize());
    },
    // 加载饼图
    loadPieChart(refs, title) {
	  let myChart = echarts.init(refs);
      let option = {
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                image: require('@/assets/images/photos/upload.png'), // 图片地址
                width: 40,
                height: 40
              },
              // left: '18.5%',
              top: 'center',
              left: 'center'
            }
          ]
        },
        title: {
          text: title,
          textStyle: {
            fontSize: 12
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom',
          left: 'center'
        },
        series: [
          {
            name: title,
            type: 'pie',
            radius: ['40%', '65%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              normal: {
                color: function (colors) {
                  let colorList = ['#f30606', '#0888e3'];
                  return colorList[colors.dataIndex];
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: '六大产业'},
              {value: 305, name: '其他产业'}
            ]
          }
        ]
      };
      myChart.setOption(option);
      this.myChart = myChart;
      window.addEventListener('resize', () => myChart.resize());
    }
  }
}
</script>

<style scoped lang="scss">
 

  ::v-deep .el-tabs__nav-scroll { 
	padding-left:15px;
  }
  ::v-deep .el-col{
    padding: 2px;
  }
  ::v-deep .el-row{
    height: 165px;
  }
 
  .el-tabs__item { font-size: 16px; /* 调整字体大小 */ 
	color: #333; /* 调整字体颜色 */ }

.box-card{
  height: 500px;
}

/*分值 */
em{
font-family:Arial;
font-size:14px;
}

.list1[data-v-54a36368],
.list2[data-v-54a36368],
.list4[data-v-54a36368] {
  position:relative;
  float:left;
  width:100%;
  list-style:none;
  padding:0;
  margin-bottom:10px;
  text-align:left
}
.list1 li[data-v-54a36368] {
  width:100%;
  line-height:24px;
  font-size:14px;
  color:#242355
}
.list1 li i[data-v-54a36368] {
  display:inline-block;
  font-style:normal;
  vertical-align:middle;
  cursor:pointer
}
.list1 li i[data-v-54a36368]:hover {
  color:#3b0e0e
}

.el-card{
	padding-left: 10px;
}
.score-star[data-v-54a36368] {
  position:relative;
  display:inline-block;
  margin-bottom:0;
  vertical-align:middle
}
.score-star span[data-v-54a36368] {
  display:block;
  float:left;
  width:14px;
  height:14px;
  margin-left:3px;
  border-radius:4px;
  background-color:hsla(0,0%,100%,.2);
}
.score-star .color1[data-v-54a36368] {
  background-color:#22dabe!important
}
.score-star .color2[data-v-54a36368] {
  background-color:#fddf76!important
}
.score-star .color3[data-v-54a36368] {
  background-color:#fc3f4d!important
}


::v-deep .star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 0 0.6em;
border: 0.5em solid rgb(145, 204, 8);
border-color: #b92b08 transparent transparent transparent;
transform: rotate(35deg);
}
 


.park-industry-statistics {
  background-color: #FFFFFF;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .header {
    width: 100%;
    height: 100%;

    ul {
      float: left;
      list-style-type: none;
      display: flex;
      width: 100%;
      height: 35px;
      text-align: center;
      line-height: 35px;
      border-bottom: 1px solid #808080;
      background-color: #FFFFFF;

      .header-left {
        background-color: red;
        width: 12px;
        height: 35px;
        margin-right: 10px;
      }
    }
  }

  .counting {
    border-right: 1px solid #808080;

    .count-panel {
      margin: 10px 0 0 0;

      .desc {
        padding-left: 10%;
      }

      .count-container {
        display: flex;

        div {
          width: 45%;
          height: 45%;
        }

        .count {
          font-size: 25px;
          font-weight: bold;
          padding: 12px 0 0 10%;
        }

        .compare {
          display: inline-grid;

          span {
            el-icon {
              line-height: 25px;
            }
          }
        }
      }
    }

    /* 产业收入总量排名 */

    .total-ranking-container {
      padding: 0 0 0 10%;
      margin-top: 10px;
    }
  }

  .pie-container {
    border-bottom: 1px solid #817c7c;
  }

}

.statistical-data-container {
  margin-top: 10px;

  .el-col-12 {
    max-width: 49%;
    flex: 0 0 49%;
  }

  .el-col {
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .industry-carrier-container {
    margin-right: 2%;
  }

  .header {
    width: 100%;

    ul {
      float: left;
      list-style-type: none;
      display: flex;
      width: 100%;
      height: 35px;
      text-align: center;
      line-height: 35px;
      border-bottom: 1px solid #808080;
      background-color: #FFFFFF;

      .header-left {
        background-color: red;
        width: 12px;
        height: 35px;
        margin-right: 10px;
      }
    }
  }



}
</style>
